<template>
	<el-dialog :title="dialogTitle" :visible.sync="visible" top="0" append-to-body :width="dialogWidth">
		<div class="system_dialog_wrapper">
			<slot></slot>
		</div>
		<template slot="footer" v-if="footer">
			<el-button size="medium" @click="visible = false">取消</el-button>
			<el-button size="medium" type="primary" :loading="loading" @click="handleSubmitForm">{{ formTypeText }}</el-button>
		</template>
	</el-dialog>
</template>

<script>
export default {
	name: 'swFormFrame',
	props: {
		value: { type: Boolean, default: false },
		type: { type: String, required: true },
		title: { type: String, default: '' },
		width: { type: String, default: '640' },
		footer: { type: Boolean, default: false },
		loading: { type: Boolean, default: false }
	},
	data() {
		return {
			visible: this.value
		};
	},
	computed: {
		dialogWidth() {
			return `${this.width}px`;
		},

		formTypeText() {
			return this.type === 'edit' ? '修改' : '新增';
		},

		dialogTitle() {
			return `${this.formTypeText}${this.title}`;
		}
	},
	watch: {
		value(flag) {
			this.visible = flag;
		},
		visible(flag) {
			this.$emit('input', flag);
		}
	},
	methods: {
		handleSubmitForm() {
			this.$emit('submit');
		}
	}
};
</script>

<style lang="scss" scoped>
.system_dialog_wrapper::v-deep {
	flex: 1;
	padding: 10px 10px 0;
	.el-form-item {
		p.tips {
			line-height: 1;
			margin: 8px 0 4px;
			color: #909399;
		}
	}
	.el-form-item.has_unit {
		.el-form-item__content {
			display: flex;
		}
		p.unit {
			flex-shrink: 0;
			margin-left: 10px;
		}
	}
}
</style>
